<template>
  <div class="lostandfound">
    <!-- header -->
    <van-row class="lostandfound-header" type="flex" justify="space-between" align="center">
      <!-- 用户头像 -->
      <van-col @click.stop="toUserindex">
        <van-image :src="user.image" round width="30px" height="30px"></van-image>
      </van-col>
      <van-col>
        <!-- title -->
        <h1 class="lostandfound-title" @click="toDetail">{{"失物招领"}}</h1>
      </van-col>
      <!-- 时间 -->
      <van-col>
        <div class="time">{{time}}</div>
      </van-col>
    </van-row>
    <!-- body -->
    <div class="lostandfound-content" @click="toDetail">
      <!-- 简介 -->
      <div class="intro">{{topic.intro}}</div>
      <!-- 图片 -->
      <div class="image">
        <img :src="topic.image" width="70px" height="70px" alt style="border-radius: 10px;" />
      </div>
    </div>
    <!-- footer -->
    <!-- 4.文章浏览量与评论 -->
    <div class="lostandfound-footer">{{viewcount}}浏览</div>
    <!-- 5.操作选项 -->
    <van-icon name="ellipsis" size="22px" @click.stop="showOperation" />
    <operation-box class="operation" direction="bottom" v-if="operate_show"></operation-box>
  </div>
</template>

<script>
import time from "@/common/time";
import utils from "@/common/utils";
import operationbox from "../Popup/topic-operate";
export default {
  name: "laf-card",
  props: {
    user: {
      type: Object,
      require: true,
    },
    topic: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      operate_show: false,
    };
  },
  methods: {
    toDetail() {
      this.$router.push({ path: "/topic", query: { id: this.topic.id } });
    },
    toUserindex() {
      this.$router.push({
        path: "/account/userindex",
        query: { user: this.user.name },
      });
    },
    showOperation() {
      this.operate_show = true;
    },
  },
  computed: {
    time() {
      return time.timeshow(this.topic.time);
    },
    viewcount() {
      return utils.numberShow(this.topic.viewcount);
    },
    commentcount() {
      return utils.numberShow(this.topic.commentcount);
    },
  },
  mounted() {},
  components: {
    "operation-box": operationbox,
  },
};
</script>

<style>
.lostandfound {
  position: relative;
  background: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 3px 3px 5px 0px #97979759;
}
.lostandfound-title {
  color: #646566;
  font-size: 18px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lostandfound-header {
  text-align: left;
  width: 95%;
  padding-left: 10px;
  padding-top: 10px;
}

.lostandfound-header .time {
  float: right;
  padding-right: 10px;
  font-size: 12px;
  color: #909090;
}
.lostandfound-header .image {
  text-align: center;
}
.lostandfound-content {
  display: inline-flex;
  width: 95%;
  margin: 3px 10px;
}
.lostandfound-content .intro {
  color: #979797;
  font-size: 13px;
  text-indent: 2em;
  min-width: 80%;
  padding-right: 10px;
  float: left;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  height: 67px;
  padding-top: 5px;
}
.lostandfound-footer {
  text-align: left;
  font-size: 12px;
  padding: 8px;
  color: #909090;
}
.lostandfound .van-icon {
  position: absolute;
  right: 15px;
  bottom: 10px;
  color: #4994e5;
}
</style>